<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>学生成绩管理系统 - 教师端</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
    <script src="../js/echarts.min.js"></script>

    <style>
        .container {
            display: flex;
            min-height: 100vh;
            margin-top: 20px;

        }

        .sidebar {
            font-family: '楷体';
            font-weight: bold;
            width: 180px;
            /* height: 670px; */
            margin: 20px;
            margin-top: 0;
            /* 背景透明 */
            /* background: rgba(0, 0, 0, 0); */
            /*   border-radius: 10px;
            border-color: rgb(64, 158, 255); */
            border-radius: 10px;
            /* 绿色     */
            background-color: rgb(77, 88, 181);
        }

        /* 覆盖Element UI默认样式 */
        .sidebar .el-menu-item {
            transition: all 0.3s;
            font-size: 16px;
            color: rgb(170, 178, 222);
        }

        /* 选中项背景色 */
        .sidebar .el-menu-item.is-active {
            /* background-color: #e6f5d0 !important; */
            background-color: rgba(78, 88, 175, 0.833);
            border-radius: 5px;
            color: rgb(255, 255, 255);
        }

        /* 悬停效果 */
        .sidebar .el-menu-item:hover {
            border-radius: 5px;
            background-color: #e6f5d0 !important;
        }


        .main-content {
            /* background-image: url('https://tse3-mm.cn.bing.net/th/id/OIP-C.5e2CNYdlpD5J2eP5Y1YmjAHaLG?rs=1&pid=ImgDetMain'); */
            border-radius: 10px;
            flex: 1;
            margin-right: 10px;
            padding: 10px;
            padding-top: 0px;
            /* background-image: url('../image/1.png'); */
            background-color: rgb(255, 255, 255);
            background-repeat: no-repeat;
            background-size: cover;
            font-family: '楷体';
            font-size: 22px;
        }

        .stat-card {
            background: #fff;
            padding: 20px;
            margin: 10px;
            border-radius: 4px;
            box-shadow: 0 2px 12px 0 rgba(0, 0, 0, .1);
        }

        .operation-bar {
            margin-bottom: 20px;
        }

        .header-buttons .el-button {
            padding: 0 12px;
        }

        .class-form {
            max-width: 500px;
            margin: 0 auto;
        }

        .stat-value {
            font-size: 24px;
            color: #409EFF;
            text-align: center;
        }

        .filter-form .el-form-item {
            margin-right: 30px;
        }

        .no-data-tip {
            text-align: center;
            color: #909399;
            padding: 40px 0;
        }

        .chart-container {
            height: 400px;
            margin-top: 20px;
        }

        .upload-tips {
            color: #606266;
            font-size: 12px;
            margin-top: 10px;
        }

        /*      #app {
            background: url('https://img.shetu66.com/2023/08/03/1691024400013637.png');
            background-size: cover;
            background-repeat: no-repeat;
        } */

        .el-card__header {
            /* 背景透明 */
            background: rgb(255, 255, 255);
        }

        .el-card__body {
            background: rgb(255, 255, 255);
        }

        h2 {
            font-size: 30px;
            text-align: center;
        }

        .class-form {
            margin-left: 0px;
        }

        /* 学生管理搜索框 */
        .operation-bar {
            padding: 12px 0px;
            background: rgba(0, 0, 0, 0);
            border-bottom: 1px solid rgba(0, 0, 0, 0);
        }

        .compact-search-container {
            display: flex;
            align-items: center;
            gap: 8px;
            overflow-x: auto;
            /* 宽度不足时出现滚动条 */
        }

        .compact-search-item {
            flex: 1;
            min-width: 160px;
            /* 防止过度挤压 */
        }

        /* 调整输入框样式 */
        :deep(.el-input__inner) {
            border-radius: 4px;
            transition: all 0.2s;
        }

        :deep(.el-input__inner:focus) {
            border-color: #409eff;
            box-shadow: 0 0 4px rgba(64, 158, 255, 0.3);
        }

        /* 滚动条样式 */
        .compact-search-container::-webkit-scrollbar {
            height: 6px;
        }

        .compact-search-container::-webkit-scrollbar-thumb {
            background: #c0c4cc;
            border-radius: 3px;
        }
    </style>
</head>

<body>
    <div id="app">
        <el-container>
            <!-- 顶部导航栏 -->
            <el-header style=" background-image: linear-gradient(to right, #00547d, #007fa4, #00aaa0, #00d072, #a8eb12);; color: white; 
                        display: flex; justify-content: space-between;
                        align-items: center; padding: 0 20px; border-top-left-radius: 10px;
                         border-top-right-radius: 10px;">
                <span style=" font-weight: bold;">欢迎:{{userProfile.username}}老师</span>
                <div class="header-buttons">
                    <el-button type="text" style="color: white; " @click="handleEditProfile">
                        <i class="el-icon-user"></i> 修改信息
                    </el-button>
                    <el-button type="text" style="color: white;" @click="handleLogout">
                        <i class="el-icon-switch-button"></i> 退出
                    </el-button>
                </div>
            </el-header>

            <div class="container">
                <!-- 侧边栏菜单 -->
                <el-menu class="sidebar" :default-active="activeIndex">
                    <el-menu-item index="1" @click="scoreInput">
                        <i class="el-icon-upload"></i>
                        <span>成绩录入</span>
                    </el-menu-item>
                    <el-menu-item index="2" @click="manageScore">
                        <i class="el-icon-s-management"></i>
                        <span>成绩管理</span>
                    </el-menu-item>
                    <el-menu-item index="3" @click="statisticAnalysis">
                        <i class="el-icon-s-data"></i>
                        <span>统计分析</span>
                    </el-menu-item>
                    <el-menu-item index="4" @click="manageClasses">
                        <i class="el-icon-office-building"></i>
                        <span>班级管理</span>
                    </el-menu-item>
                </el-menu>

                <!-- 主内容区 -->
                <div class="main-content">
                    <!-- 成绩录入 -->
                    <div v-if="currentView === 'import'">
                        <!-- <h2>成绩录入</h2> -->
                        <el-card>
                            <div slot="header">单条录入</div>
                            <el-form :model="singleScore" label-width="80px" style="max-width: 500px;">
                                <el-form-item label="学生ID">
                                    <el-input style="width: 53%;" v-model="singleScore.studentId"></el-input>
                                </el-form-item>
                                <el-form-item label="班级">
                                    <el-select v-model="singleScore.className" placeholder="请选择班级"
                                        @change="getClassSubject">
                                        <el-option v-for="item in classList" ::key="item" :label="item" :value="item">
                                        </el-option>
                                    </el-select>
                                </el-form-item>
                                <el-form-item label="科目">
                                    <el-select v-model="singleScore.subjectName" placeholder="请选择科目"
                                        @change="getSemester">
                                        <el-option v-for="item in subjectList" :key="item" :label="item" :value="item">
                                        </el-option>
                                    </el-select>
                                </el-form-item>
                             <!--    <el-form-item label="学期">
                                    <el-select v-model="singleScore.semester" placeholder="请选择">
                                        <el-option v-for="item in semesterList" :key="item" :label="item" :value="item">
                                        </el-option>
                                    </el-select>
                                </el-form-item> -->
                                <el-form-item label="平时成绩">
                                    <el-input-number style="width: 53%;" v-model="singleScore.usualScore" :min="0"
                                        :max="100"></el-input-number>
                                </el-form-item>
                                <el-form-item label="期中成绩">
                                    <el-input-number style="width: 53%;" v-model="singleScore.midtermScore" :min="0"
                                        :max="100"></el-input-number>
                                </el-form-item>
                                <el-form-item label="期末成绩">
                                    <el-input-number style="width: 53%;" v-model="singleScore.finalScore" :min="0"
                                        :max="100"></el-input-number>
                                </el-form-item>
                
                                <el-form-item>
                                    <el-button type="primary" @click="submitSingleScore">录入</el-button>
                                </el-form-item>
                            </el-form>
                        </el-card>

                        <el-card style="margin-top: 20px;">
                            <div slot="header">批量导入</div>
                            <el-upload action="http://localhost:8080/batchInputScore" :headers="{token:token}"
                                :on-error="handleUploadError" :on-success="handleUploadSuccess"
                                :before-upload="beforeUpload" accept=".xlsx,.csv" :auto-upload="false" ref="upload">
                                <el-button style="float: left" type="primary">选择Excel文件</el-button><br><br>
                                <div class="upload-tips">支持：xlsx/csv，文件大小不超过10MB(格式请和单条录入一致)</div>
                            </el-upload>
                            <el-button type="success" style="margin-top: 10px;" @click="submitUpload">
                                录入文件
                            </el-button>
                        </el-card>
                    </div>

                    <!-- 成绩管理 -->
                    <div v-if="currentView === 'manage'">
                        <!-- <h2>成绩管理</h2> -->
                        <div class="operation-bar">
                            <div class="compact-search-container">
                                <el-input v-model="searchStudentId" placeholder="请输入学号" type="number" clearable
                                    class="compact-search-item"></el-input>
                                <el-input v-model="searchName" placeholder="请输入姓名" clearable
                                    class="compact-search-item"></el-input>


                                <el-input v-model="searchClassName" placeholder="请输入班级" clearable
                                    class="compact-search-item"></el-input>

                                <el-input v-model="searchSubjectName" placeholder="请输入科目" clearable
                                    class="compact-search-item"></el-input>
<!-- 
                                <el-input v-model="searchSemester" placeholder="请输入学期" clearable
                                    class="compact-search-item"></el-input> -->
                            </div>
                        </div>
                        <el-table :data="filteredScores" border stripe>
                            <el-table-column prop="studentId" label="学号" sortable></el-table-column>
                            <el-table-column prop="name" label="姓名"></el-table-column>
                            <el-table-column prop="className" label="班级" width="100"></el-table-column le-column>
                            <el-table-column prop="subjectName" label="科目"></el-table-column>
                            <el-table-column prop="usualScore" label="平时成绩" width="101" sortable></el-table-column>
                            <el-table-column prop="midtermScore" label="期中成绩" width="101" sortable></el-table-column>
                            <el-table-column prop="finalScore" label="期末成绩" width="101" sortable></el-table-column>
                            <el-table-column prop="score" label="综合成绩" width="101" sortable></el-table-column>
                            <el-table-column prop="place" label="班级排名"></el-table-column>
                          <!--   <el-table-column prop="semester" label="学期"></el-table-column> -->
                            <el-table-column label="操作" width="180">
                                <template slot-scope="scope">
                                    <el-button size="mini" @click="editScore(scope.row)">编辑</el-button>
                                    <el-button size="mini" type="danger" @click="deleteScore(scope.row)">删除</el-button>
                                </template>
                            </el-table-column>
                        </el-table>
                    </div>

                    <!-- 编辑对话框 -->
                    <el-dialog title="编辑成绩" :visible.sync="editScoreDialogVisible" width="600px">
                        <el-form label-width="100px">
                            <el-row :gutter="20">
                                <el-col :span="12">
                                    <el-form-item label="学号" prop="studentId">
                                        <el-input v-model="editScoreForm.studentId" disabled></el-input>
                                    </el-form-item>
                                </el-col>
                                <el-col :span="12">
                                    <el-form-item label="姓名" prop="name">
                                        <el-input v-model="editScoreForm.name" disabled></el-input>
                                    </el-form-item>
                                </el-col>
                                <el-col :span="12">
                                    <el-form-item label="科目" prop="subjectName">
                                        <el-select v-model="editScoreForm.newSubjectName">
                                            <el-option v-for="item in subjectList" :key="item" :label="item"
                                                :value="item"></el-option>
                                        </el-select>
                                    </el-form-item>
                                </el-col>
                                <el-col :span="12">
                                    <el-form-item label="平时成绩" prop="className">
                                        <el-input v-model.number="editScoreForm.usualScore" type="number" :min="0"
                                        :max="100"></el-input>
                                    </el-form-item>
                                </el-col>
                                <el-col :span="12">
                                    <el-form-item label="期中成绩" prop="midtermScore">
                                        <el-input v-model.number="editScoreForm.midtermScore" type="number" :min="0"
                                            :max="100"></el-input>
                                    </el-form-item>
                                </el-col>
                                <el-col :span="12">
                                    <el-form-item label="期末成绩" prop="finalScore">
                                        <el-input v-model.number="editScoreForm.finalScore" type="number" :min="0"
                                            :max="100"></el-input>
                                    </el-form-item>
                                </el-col>
                               <!--  <el-col :span="12">
                                    <el-form-item label="学期" prop="semester">
                                        <el-input v-model="editScoreForm.newSemester"></el-input>
                                    </el-form-item>
                                </el-col>       -->               
                            </el-row>
                        </el-form>

                        <span slot="footer" class="dialog-footer">
                            <el-button @click="editScoreDialogVisible = false">取 消</el-button>
                            <el-button type="primary" @click="submitScoreEdit">确 定</el-button>
                        </span>
                    </el-dialog>

                    <!-- 统计分析 -->
                    <div v-if="currentView === 'stats'">
                        <!-- <h2>成绩统计分析</h2> -->
                        <el-card>
                            <div slot="header" class="filter-header">
                                <el-form :inline="true" class="filter-form">
                                    <el-form-item label="班级">
                                        <el-select v-model="selectedClassName" placeholder="选择班级"
                                            @change="getClassSubject2">
                                            <el-option v-for="c in classList" :key="c" :label="c" :value="c" >
                                            </el-option>
                                        </el-select>
                                    </el-form-item>
                                    <el-form-item label="学科">
                                        <el-select v-model="selectedSubjectName" placeholder="选择学科"
                                            @change="loadStatisticsData">
                                            <el-option v-for="s in subjectList" :key="s" :label="s" :value="s">
                                            </el-option>
                                        </el-select>
                                    </el-form-item>
                                </el-form>
                            </div>

                            <div>
                                <!--  <div v-if="showStats" class="stat-cards">
                                    <el-card class="stat-card">
                                        <div slot="header">平均分</div>
                                        <div class="stat-value">{{ statistics.average || '--' }}</div>
                                    </el-card>
                                    <el-card class="stat-card">
                                        <div slot="header">最高分</div>
                                        <div class="stat-value">{{ statistics.max || '--' }}</div>
                                    </el-card>
                                    <el-card class="stat-card">
                                        <div slot="header">最低分</div>
                                        <div class="stat-value">{{ statistics.min || '--' }}</div>
                                    </el-card>
                                </div> -->

                                <div v-show="showStats" class="chart-container">
                                    <div id="chart" style="width: 1040px; height: 380px;"></div>
                                </div>

                                <div v-show="!showStats" class="no-data-tip">
                                    <i class="el-icon-info"></i> 请选择班级和学科查看统计信息
                                </div>
                            </div>
                        </el-card>
                    </div>

                    <!-- 班级管理 -->
                    <div v-if="currentView === 'class'">
                        <!-- <h2>班级管理</h2> -->
                        <el-card>
                            <div slot="header">添加课程</div>
                            <el-form :model="classForm" :rules="classRules" ref="classForm" label-width="100px"
                                class="class-form">
                                <el-form-item label="班级" prop="className">
                                    <el-input v-model="classForm.className" placeholder="如：22级计科1班"
                                        style="width: 221px;"></el-input>
                                </el-form-item>
                                <el-form-item label="所教学科" prop="subjectName">
                                    <el-select v-model="classForm.subjectName" placeholder="请选择科目">
                                        <el-option v-for="item in allSubjectName" :key="item" :label="item"
                                            :value="item"></el-option>
                                    </el-select>
                                </el-form-item>
                               <!--  <el-form-item label="学期" prop="semester">
                                    <el-input v-model="classForm.semester" style="width: 221px;"></el-input>
                                </el-form-item> -->
                                <!-- 平时成绩占比 -->
                                <el-form-item label="平时成绩占比" prop="percentageUsualScore">
                                    <el-input v-model="classForm.percentageUsualScore"  style="width: 221px;" placeholder="请输入百分比如:20%"></el-input>
                                </el-form-item>
                                <!-- 期中成绩占比 -->
                                <el-form-item label="期中成绩占比" prop="percentageMidtermScore">
                                    <el-input v-model="classForm.percentageMidtermScore"  style="width: 221px;"
                                        ></el-input>
                                </el-form-item>
                                <el-form-item label="期末成绩占比" prop="percentageFinalScore">
                                    <el-input v-model="classForm.percentageFinalScore"  style="width: 221px;"
                                        ></el-input>
                                </el-form-item>

                                <el-form-item>
                                    <el-button type="primary" @click="submitClass">添加</el-button>
                                    <el-button @click="resetClassForm">重置</el-button>
                                </el-form-item>
                            </el-form>
                        </el-card>

                        <el-card style="margin-top: 20px;">
                            <div slot="header">已管理课程（共{{ classList.length }}个）</div>
                            <el-table :data="classList" border stripe empty-text="暂无班级数据">
                                <el-table-column prop="className" label="班级" width="150"></el-table-column>
                                <el-table-column prop="subjectName" label="科目" width="150"></el-table-column>
                               <!--  <el-table-column prop="semester" label="学期" width="100"></el-table-column> -->
                                <el-table-column prop="percentageUsualScore" label="平时成绩占比" width="100"></el-table-column>
                                <el-table-column prop="percentageMidtermScore" label="期中成绩占比" width="100"></el-table-column>
                                <el-table-column prop="percentageFinalScore" label="期末成绩占比" width="100"></el-table-column>
                                <el-table-column label="操作" width="150">
                                    <template slot-scope="scope">
                                        <el-button size="mini" @click="editClass(scope.row)">编辑</el-button>
                                        <el-button size="mini" type="danger"
                                            @click="deleteClass(scope.row)">删除</el-button>
                                    </template>
                                </el-table-column>
                            </el-table>
                        </el-card>
                    </div>
                </div>
            </div>
            <!-- 个人信息对话框 -->
            <el-dialog title="修改个人信息" :visible.sync="profileDialogVisible" width="500px">
                <el-form :model="userProfile" label-width="80px">
                    <el-form-item label="用户名">
                        <el-input v-model="userProfile.newUsername"></el-input>
                    </el-form-item>
                    <el-form-item label="姓名">
                        <el-input v-model="userProfile.name"></el-input>
                    </el-form-item>
                    <el-form-item label="邮箱">
                        <el-input v-model="userProfile.email"></el-input>
                    </el-form-item>

                    <!-- 密码修改选项 -->
                    <el-form-item label="修改密码">
                        <el-checkbox v-model="changePassword"></el-checkbox>
                    </el-form-item>

                    <!-- 密码修改区域 -->
                    <div v-if="changePassword">
                        <el-form-item label="原密码">
                            <el-input v-model="userProfile.oldPassword" type="password" show-password
                                placeholder="请输入原密码"></el-input>
                        </el-form-item>
                        <el-form-item label="新密码">
                            <el-input v-model="userProfile.newPassword" type="password" show-password
                                placeholder="请输入新密码"></el-input>
                        </el-form-item>
                        <el-form-item label="确认密码">
                            <el-input v-model="userProfile.confirmPassword" type="password" show-password
                                placeholder="请再次输入新密码"></el-input>
                        </el-form-item>
                    </div>
                </el-form>
                <span slot="footer" class="dialog-footer">
                    <el-button @click="profileDialogVisible = false">取 消</el-button>
                    <el-button type="primary" @click="submitProfile">确 定</el-button>
                </span>
            </el-dialog>

            <!-- 编辑课程对话框 -->
            <el-dialog title="编辑课程信息" :visible.sync="editDialogVisible" width="500px" @close="handleDialogClose">
                <el-form :model="classForm" label-width="100px">
                    <el-form-item label="班级">
                        <el-input v-model="classForm.newClassName" disabled></el-input>
                    </el-form-item>
                    <el-form-item label="科目" prop="subjectName">
                        <el-select v-model="classForm.newSubjectName" placeholder="请选择科目">
                            <el-option v-for="item in allSubjectName" :key="item" :label="item"
                                :value="item"></el-option>
                        </el-select>
                    </el-form-item>
                 <!--    <el-form-item label="学期" prop="semester">
                        <el-input v-model="classForm.newSemester" ></el-input>
                    </el-form-item> -->
                    <el-form-item label="平时成绩占比" prop="percentageUsualScore">
                        <el-input v-model="classForm.percentageUsualScore" 
                        placeholder="请输入百分比如:20%"></el-input>
                    </el-form-item>
                    <el-form-item label="期中成绩占比" prop="percentageMidtermScore">
                        <el-input v-model="classForm.percentageMidtermScore" 
                        ></el-input>
                    </el-form-item>
                    <el-form-item label="期末成绩占比" prop="percentageFinalScore">
                        <el-input v-model="classForm.percentageFinalScore"  
                        ></el-input>
                    </el-form-item>
                </el-form>

                <span slot="footer" class="dialog-footer">
                    <el-button @click="cancelEditClass">取 消</el-button>
                    <el-button type="primary" @click="submitEditClass">确 定</el-button>
                </span>
            </el-dialog>
        </el-container>
    </div>

    <script>
        let userTeacherInfo = JSON.parse(localStorage.getItem('userTeacherInfo'));
        console.log(userTeacherInfo);
        var token1 = userTeacherInfo.token;

        // 添加axios请求拦截器
        axios.interceptors.request.use(config => {
            config.headers.Token = token1;  // 添加Token请求头
            return config;
        }, error => {
            return Promise.reject(error);
        });
        // 添加axios响应拦截器
        axios.interceptors.response.use(
            response => response,
            error => {
                if (error.response.status === 401) {
                    vueInstance.$message.error({
                        message: '登录已过期，请重新登录',
                    });
                    localStorage.clear();

                    setTimeout(() => {
                        window.location.href = '../login.html';
                    }, 1200);  // 1.2秒后执行跳转
                }
                return Promise.reject(error);
            }
        );
        new Vue({
            el: '#app',
            created() {
                vueInstance = this;
            },
            data() {
                return {
                    token: token1,
                    editDialogVisible: false,
                    activeIndex: '1', // 默认激活第一个菜单项
                    currentView: 'import',
                    profileDialogVisible: false,
                    editScoreDialogVisible: false,
                    showStats: false,

                    changePassword: false,  // 密码修改
                    searchName: '',
                    searchStudentId: '',
                    searchClassName: '',
                    searchSubjectName: '',
                    searchSemester: '',
                    // 用户信息
                    userProfile: {
                        newUsername: '',
                        name: '',
                        oldPassword: '',
                        newPassword: '',
                        confirmPassword: '',
                        email: '',
                        username: '',
                        teacherId: userTeacherInfo.teacherId
                    },

                    // 成绩相关
                    singleScore: {
                        studentId: '',
                        className: '',
                        subjectName: '', 
                        teacherId: userTeacherInfo.teacherId,
                        usualScore: 0,
                        midtermScore: 0,
                        finalScore: 0,
                        semester: '', 
                    },
                    scores: [
                    ],

                    // 统计分析相关
                    selectedClassId: '',
                    selectedSubject: '',
                    loadingStats: false,
                    statistics: {
                        average: null,
                        max: null,
                        min: null,
                        distribution: []
                    },


                    // 班级管理相关
                    classForm: {
                        className: '',
                        subjectName: '',
                        semester: '',
                        percentageUsualScore:'',
                        percentageMidtermScore:'',
                        percentageFinalScore:'',
                        teacherId: userTeacherInfo.teacherId,
                        newClassName: '',
                        newSubjectName: '',
                        newSemester: ''
                    },
             /*        classRules: {
                        className: [
                            { required: true},
                        ],
                        subjectName: [
                            { required: true}
                        ],
                        semester: [
                            { required: true }
                        ],
                        percentageUsualScore: [
                            { required: true}
                  
                        ],
                        percentageMidtermScore: [
                            { required: true}
                  
                        ],
                        percentageFinalScore: [
                                {  required: true}
                        ]

                    }, */
                    classList: [

                    ],
                    subjectList: [

                    ],
                    semesterList: [
                    ],
                    allSubjectName: [],
                    editScoreForm: {
                        studentId: '',
                        name: '',
                        subjectName: '',
                        className: '',
                        newSubjectName: '',
                        usualScore: '',
                        midtermScore: '',
                        finalScore: '',              
                        semester: '',
                        newSemester: '', 
                        teacherId: userTeacherInfo.teacherId                
                    },
                    selectedClassName: '',
                    selectedSubjectName: '',
                    // 分析图数据
                    xAxisData: [],
                    ySeriesData: []
                }
            },
            computed: {
                filteredScores() {
                    return this.scores.filter(score => {
                        return (
                            (this.searchName ? score.name.includes(this.searchName) : true) &&
                            (this.searchStudentId ? score.studentId == this.searchStudentId : true) &&
                            (this.searchClassName ? score.className.includes(this.searchClassName) : true) &&
                            (this.searchSubjectName ? score.subjectName.includes(this.searchSubjectName) : true) &&
                            (this.searchSemester ? score.semester.includes(this.searchSemester) : true)
                        )
                    })
                },

            },
            methods: {
                submitUpload() {
                    if (this.$refs.upload.uploadFiles.length === 0) {
                        this.$message.warning('请先选择要上传的文件');
                        return;
                    }
                    this.$refs.upload.submit();
                },
                scoreInput() {
                    this.currentView = 'import'
                    this.singleScore .className = ''
                    this.singleScore.subjectName = ''
                    this.singleScore.semester = ''
                    this.semesterList = ''
                    this.searchClass()
                },
                loadAllSubjectName() {
                    axios.get(`http://localhost:8080/searchAllSubjectName`).then(response => {
                        this.allSubjectName = response.data.data;
                    })
                },
                manageClasses() {
                    this.currentView = 'class'
                    this.loadClasses()
                    this.loadAllSubjectName()
                },
                manageScore() {
                    this.currentView = 'manage'
                    this.loadScores()
                },

                statisticAnalysis() {
                    this.currentView = 'stats'
                    this.selectedClassName = ''
                    this.selectedSubjectName = ''
                    this.searchClass()
                },
                getSemester() {
                    this.singleScore.semester = ''
                    axios.get(`http://localhost:8080/searchSemester?teacherId=${userTeacherInfo.teacherId}&className=${this.singleScore.className}&subjectName=${this.singleScore.subjectName}`).then(response => {
                        this.semesterList = response.data.data;
                    })
                },

                getClassSubject() {
                    this.singleScore.subjectName = ''
                    this.singleScore.semester = ''
                    this.semesterList = ''
                    axios.get(`http://localhost:8080/searchSubject?teacherId=${userTeacherInfo.teacherId}&className=${this.singleScore.className}`).then(response => {
                        this.subjectList = response.data.data;
                    })
                },
                getClassSubject2() {
                    this.selectedSubjectName = ''
                    axios.get(`http://localhost:8080/searchSubject?teacherId=${userTeacherInfo.teacherId}&className=${this.selectedClassName}`).then(response => {
                        this.subjectList = response.data.data;
                    })
                },
                searchClass() {
                    this.subjectList = ''
                    axios.get(`http://localhost:8080/searchClass?teacherId=${userTeacherInfo.teacherId}`).then(response => {
                        this.classList = response.data.data;
                    })

                },

                // 用户相关方法
                handleEditProfile() {
                    this.userProfile = {
                        newUsername: userTeacherInfo.username,
                        name: userTeacherInfo.name,
                        oldPassword: '',
                        newPassword: '',
                        confirmPassword: '',
                        email: userTeacherInfo.email,
                        username: userTeacherInfo.username
                    }
                    this.profileDialogVisible = true

                },
                async submitProfile() {
                    if (this.userProfile.newPassword !== this.userProfile.confirmPassword) {
                        this.$message.error('两次输入的密码不一致')
                    } else if (this.userProfile.oldPassword !== '' && this.userProfile.newPassword == '') {
                        this.$message.error('请输入新密码')
                    } else {
                        try {
                            let result = await axios.post(`http://localhost:8080/updateTeacherInfo`, this.userProfile);
                            if (result.data.success) {
                                // 更新本地存储中的用户信息
                                userTeacherInfo.username = result.data.data.username;
                                userTeacherInfo.email = result.data.data.email;
                                userTeacherInfo.role = result.data.data.role;
                                userTeacherInfo.name = result.data.data.name;
                                userTeacherInfo.teacherId = result.data.data.teacherId;
                                localStorage.setItem('userTeacherInfo', JSON.stringify(userTeacherInfo));
                                this.userProfile = {
                                    newUsername: userTeacherInfo.username,
                                    name: userTeacherInfo.name,
                                    oldPassword: '',
                                    newPassword: '',
                                    confirmPassword: '',
                                    email: userTeacherInfo.email,
                                    username: userTeacherInfo.username
                                }
                                this.$message.success('修改成功')
                                console.log(userTeacherInfo)
                                this.profileDialogVisible = false
                            } else {
                                this.$message.error(result.data.msg)
                            }
                        } catch (error) {
                            this.$message.error('修改失败:' + error)
                        }
                    }
                },
                handleLogout() {
                    this.$confirm('确认要退出系统吗？', '提示', {
                        type: 'warning'
                    }).then(() => {
                        localStorage.clear();
                        window.location.href = '../login.html'

                    })
                },

                //录入单科成绩
                submitSingleScore() {
                    axios.post('http://localhost:8080/insertSingleScore', this.singleScore)
                        .then((response) => {
                            if (response.data.success) {
                                this.$message.success(response.data.message)
                                this.loadScores();
                                this.singleScore.studentId = '',
                                    this.singleScore.usualScore = 0,
                                    this.singleScore.midtermScore = 0,
                                    this.singleScore.finalScore = 0  
                            } else {
                                this.$message.error(response.data.message)
                            }
                        })
                        .catch(error => {
                            console.error('Error:', error)
                            this.$message.error('提交失败', error.message)
                        })
                },
                handleUploadSuccess(response, file) {
                    this.$message.success(response)
                    this.loadScores();
                },
                handleUploadError(err) {
                    this.$message.error('文件处理失败: ' + (err.message || '未知错误'))
                },
                beforeUpload(file) {
                    const isExcel = file.type.includes('excel') || file.type.includes('sheet')
                    const isCSV = file.type === 'text/csv'
                    const isLt10M = file.size / 1024 / 1024 < 10

                    if (!isExcel && !isCSV) {
                        this.$message.error('仅支持上传Excel/CSV文件')
                        return false
                    }
                    if (!isLt10M) {
                        this.$message.error('文件大小不能超过10MB')
                        return false
                    }
                    return true

                },
                submitScoreEdit() {
                    axios.post('http://localhost:8080/editScore', this.editScoreForm)
                        .then((response) => {
                            if (response.data.success) {
                                this.$message.success('修改成功')
                                this.editScoreDialogVisible = false
                                this.loadScores()
                                this.editScoreForm = {
                                    studentId: '',
                                    name: '',
                                    className: '',
                                    subjectName: '',
                                    newSubjectName: '',
                                    usualScore: '',
                                    midtermScore: '',
                                    finalScore: '',
                                    score: '',
                                    semester: '',
                                    newSemester: '',                                   
                                }
                            } else {
                                this.$message.error('修改失败' + response.data.message)
                            }
                        })

                },
                async editScore(row) {
                    this.editScoreForm.studentId = row.studentId;
                    this.editScoreForm.name = row.name;
                    this.editScoreForm.teacherId = userTeacherInfo.teacherId;
                    this.editScoreForm.usualScore = row.usualScore;
                    this.editScoreForm.midtermScore = row.midtermScore;
                    this.editScoreForm.finalScore = row.finalScore;
                    this.editScoreForm.score = row.score;
                    this.editScoreForm.className = row.className;
                    this.editScoreForm.semester = row.semester;
                    this.editScoreForm.newSemester = row.semester;
                    this.editScoreForm.subjectName = row.subjectName;
                    this.editScoreForm.newSubjectName = row.subjectName;
                    await axios.get(`http://localhost:8080/searchSubject?teacherId=${userTeacherInfo.teacherId}&className=${row.className}`).then(response => {
                        this.subjectList = response.data.data;
                    })
                    this.editScoreDialogVisible = true

                },
                deleteScore(row) {
                    this.$confirm('确定删除该记录吗？', '提示', {
                        type: 'warning'
                    }).then(() => {
                        axios.delete(`http://localhost:8080/deleteScore`,
                            {
                                data: {
                                    studentId: row.studentId,
                                    subjectName: row.subjectName,
                                    semester: row.semester
                                }
                            }
                        )
                            .then((response) => {
                                if (response.data.success) {
                                    this.$message.success(response.data.message)
                                    this.loadScores()
                                }
                                else {
                                    this.$message.error(response.data.message)
                                }

                            })

                    })
                },
                loadScores() {
                    axios.get(`http://localhost:8080/loadScores?teacherId=${userTeacherInfo.teacherId}`)
                        .then((response) => {
                            if (response.data.success) {
                                this.scores = response.data.data
                            }
                        })
                },

                // 添加班级
                submitClass() {
                    axios.post('http://localhost:8080/insertManageClass', this.classForm)
                        .then(response => {
                            if (response.data.success) {
                                this.$message.success(response.data.message)
                                this.loadClasses()
                                this.classForm.subjectName = ''
                                this.loadScores()
                            } else {
                                this.$message.error(response.data.message)
                            }
                        })
                        .catch(error => {
                            this.$message.error('提交失败')
                        })
                },
                resetClassForm() {
                    this.classForm = {
                        className: '',
                        subjectName: '',
                        semester: '',
                        teacherId: userTeacherInfo.teacherId,
                    }
                },
                editClass(row) {
                    this.classForm = {
                        className: row.className,
                        subjectName: row.subjectName,
                        semester: row.semester,
                        percentageUsualScore: row.percentageUsualScore,
                        percentageMidtermScore: row.percentageMidtermScore,
                        percentageFinalScore: row.percentageFinalScore,
                        teacherId: userTeacherInfo.teacherId,
                        newClassName: row.className,
                        newSubjectName: row.subjectName,
                        newSemester: row.semester
                    }
                    this.editDialogVisible = true
                },
                cancelEditClass() {
                    this.classForm = {
                        className: '',
                        subjectName: '',
                        semester: '',
                        teacherId: userTeacherInfo.teacherId,
                        newClassName: '',
                        newSubjectName: '',
                        newSemester: ''
                    }
                    this.editDialogVisible = false
                },
                handleDialogClose() {
                    this.classForm = {
                        className: '',
                        subjectName: '',
                        semester: '',
                        teacherId: userTeacherInfo.teacherId,
                        newClassName: '',
                        newSubjectName: '',
                        newSemester: ''
                    }
                    this.editDialogVisible = false
                },
                submitEditClass() {
                    axios.post('http://localhost:8080/updateManageClass', this.classForm)
                        .then(response => {
                            if (response.data.success) {
                                this.$message.success(response.data.message)
                                this.loadClasses()
                                this.loadScores()
                                this.classForm.className = ''
                                this.classForm.subjectName = ''
                                this.classForm.semester = ''
                                this.classForm.newClassName = ''
                                this.classForm.newSubjectName = ''
                                this.classForm.newSemester = ''
                                this.editDialogVisible = false
                            } else {
                                this.$message.error(response.data.message)
                            }
                        }).catch(error => {
                            this.$message.error('提交失败')
                        })
                },
                deleteClass(row) {
                    this.$confirm(`确定删除该班级吗？`, '警告', {
                        type: 'warning',
                        confirmButtonText: '删除',
                        cancelButtonText: '取消'
                    }).then(() => {
                        axios.delete(`http://localhost:8080/deleteManageClass`, {
                            data: { // axios 的 delete 请求体放在 data 属性
                                className: row.className,
                                subjectName: row.subjectName,
                                semester: row.semester,
                                teacherId: userTeacherInfo.teacherId
                            }
                        })
                            .then((response) => {
                                if (response.data.success) {
                                    this.$message.success(response.data.message)
                                    this.loadClasses()
                                    this.loadScores()
                                } else {
                                    this.$message.error(response.data.message)
                                }
                            }).catch(error => {
                                this.$message.error('删除失败')
                            })
                    })
                },
                loadClasses() {
                    axios.get(`http://localhost:8080/loadAllClasses?teacherId=${userTeacherInfo.teacherId}`)
                        .then(response => {
                            this.classList = response.data.data
                        })
                },

                //筛选数据
                selectEchartsScores() {
                    this.xAxisData = []
                    this.ySeriesData = []
                    if (this.selectedClassName && this.selectedSubjectName) {
                        this.scores.forEach(score => {
                            if (score.className === this.selectedClassName && score.subjectName === this.selectedSubjectName) {
                                this.xAxisData.push(score.name)
                                this.ySeriesData.push(score.score)
                            }
                        })
                    }
                },

                // 配置图表数据
                loadStatisticsData() {
                    this.selectEchartsScores();

                    // 图表
                    var myChart = echarts.init(document.getElementById('chart'));

                    // 指定图表的配置项和数据
                    var option = {
                        title: {
                            text: '成绩分布(' + this.selectedSubjectName + ')',
                        },
                        xAxis: {
                            type: 'category',
                            data: this.xAxisData
                        },
                        yAxis: {
                            type: 'value',
                        },
                        series: [
                            {
                                name: '成绩',
                                type: 'bar',
                                data: this.ySeriesData,
                                markPoint: {
                                    data: [
                                        { type: 'max', name: '最大值' },
                                        { type: 'min', name: '最小值' }
                                    ]
                                },
                                markLine: {
                                    data: [
                                        { type: 'average', name: '平均值' }
                                    ]
                                }
                            }
                        ]
                    };
                    myChart.setOption(option);
                    this.showStats = true;
                }
            },
            mounted() {
                this.loadScores()
                this.loadClasses()
                this.userProfile = {
                    newUsername: userTeacherInfo.username,
                    name: userTeacherInfo.name,
                    oldPassword: '',
                    newPassword: '',
                    confirmPassword: '',
                    email: userTeacherInfo.email,
                    username: userTeacherInfo.username,
                    teacherId: userTeacherInfo.teacherId
                }
                this.searchClass()
                this.loadAllSubjectName()
            }
        })

    </script>
</body>

</html>